<template>
  <div>
    <el-dialog
      :show-close="false"
      :visible.sync="dialogVisible"
      width="1160px"
      class="article_body"
      :append-to-body="true"
      :before-close="handleClose"
    >
    <span slot="title"></span>
    <div>
        <img class="article_colse" src="@/assets/articleColse.png" @click="handleClose()"/>
        <div class="article_title ft18 font_weight colBlueTitle">项目介绍</div>
        <div class="flex_img colBlueTitle ft18 mt10">
          <img class="mr20" src="@/assets/articleLeft.png" />
          “千万工程”发源地梅林村水稻数智农场
          <img class="ml20" src="@/assets/articleRight.png" />
        </div>
        <div class="article_content ft18 font_weight pr30 pl10 pt20">
          <div>杭州电子科技大学数字农业研究院发挥自身在农业传感器、大数据分析、智能农机等数字农业领域的科技创新能力，依托构建的空天地一体化遥感监测技术体系，针对梅林村水稻产业数字化转型升级，以及一二三产融合发展，开发梅林村水稻产业数智化应用示范。</div>
          <div class="mt10">通过地基遥感长势传感器、物候传感器、土壤水质传感器、病虫害监测仪，以及无人机多光谱遥感等多维传感技术实时监测作物生长环境和生长过程，通过对农业大数据的建模和分析，构建长势与水肥、收获期与产量预测、病虫害监测与绿色防控、智慧灌溉等模型，实现基于数据驱动的农事管理与产品品质保障的数智化农业体系，为水稻种植提供科学、准确的生产管理决策。</div>
          <div class="mt10">通过开发水稻全生命周期质量追溯系统，为农产品销售提供地块地理信息、种子检测结果、环境气象数据、种植环节水肥药施用量化记录、品质检测结果等多种数据支撑的数字化溯源，赋能梅林水稻品牌效应。</div>
          <div class="mt10">以水稻数智农场为依托，开发适用于中小学生的农业科技主题，提供农业场景下的科技研学，引导农业认知、厚植爱农情，同时参与千万未来乡创学院建设，为农业管理、乡村运营、青年农创、规模种植户等提供数字农业知识体系和实践案例分析，培养数字农业人才，为国家乡村振兴提供人才培养支撑。</div>
        </div>
        <div class="article_btn colBlueTag ft16">进入项目</div>
    </div>
  </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ArticleDialog',
  data() {
    return {
      dialogVisible: false
    }
  },
  mounted() {
  },

  methods: {
    handleClose() {
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
    .article_body {
        ::-webkit-scrollbar {
            width: 0.3vw;
            margin-left: 1vw;
        }
        ::-webkit-scrollbar-track {
            // background-color: red;
            background-color: #03182c;
            border-radius: 0.15vw;
        }
        ::-webkit-scrollbar-track-piece{
            background-color: #03182c;
            border-radius: 0.15vw;
        }
        ::-webkit-scrollbar-thumb{
            background-color: #fff;
            border-radius: 0.15vw;
        }
        ::v-deep .el-dialog {
            background: none;
            margin-top: 25vh !important;
        }
        ::v-deep .el-dialog__header {
            padding: 0
        }
        ::v-deep .el-dialog__body {
            padding: 0;
            background: url("~@/assets/articleBack.png");
            background-size: 100% 100%;
            height: 512px;
            .article_title {
                text-align: center;
                line-height: 44px;
            }
            .flex_img {
                display: flex;
                align-items: center;
                justify-content: center;
                img {
                    width: 38px;
                    height: 37.95px;
                }
            }
            .article_content {
                width: 1080px;
                height: 307px;
                overflow-y: auto;
                color: #fff;
                margin: 10px auto;
                font-weight: bold;
                text-indent: 38px;
                line-height: 30px;
            }
            .article_btn {
                background: url("~@/assets/articleBtn.png");
                background-size: 100% 100%;
                width: 152px;
                height: 48px;
                position: absolute;
                right: 25px;
                bottom: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .article_colse {
                width: 20px;
                height: 20px;
                position: absolute;
                right: 40px;
                top: 35px;
            }
        }
    }
</style>
